import React from "react";
import { Platform, StatusBar } from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";

import Register from "./screens/Register";
import Login from "./screens/Login";
import Home from "./screens/HomeScreen";
import Forum from "./screens/forum/ForumScreen";
import ForumList from './screens/forum/ForumList';
import Account from "./screens/AccountScreen";
import TopicList from "./screens/topic/list";
import TopicDetail from './screens/topic/detail';
import CommentComment from './screens/topic/comment';
import CreateTopic from './screens/topic/create';


const headerStyle = {
  marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
};

export const UnAuthenticated = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      headerStyle
    }
  },
  Register: {
    screen: Register,
    navigationOptions: {
      title: "Register",
      headerStyle
    }
  },
});

const TopicLayout = StackNavigator({
  ForumList: {
    screen: ForumList,
  },
  TopicList: {
    screen: TopicList,
  },
  CreateTopic: {
    screen: CreateTopic,
  },
  TopicDetail: {
    screen: TopicDetail
  },
  CommentComment: {
    screen: CommentComment
  }
})

export const ForumLayout = StackNavigator({
  ForumMain: {
    screen: Forum,
  },
  ForumMainPopList: {
    screen: TopicLayout,
  },

}, {
  mode: "modal",
  headerMode: "none"
});




export const Authenticated = TabNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: ({ tintColor, focused }) => (
        <Icon
          name={focused ? 'home' : 'home-outline'}
          size={26}
          style={{ color: tintColor }}
        />
      ),
    },
  },
  Forum: {
    screen: ForumLayout,
    navigationOptions: {
      tabBarLabel: 'Forum',
      tabBarIcon: ({ tintColor, focused }) => (
        <Icon
          name={focused ? 'forum' : 'forum-outline'}
          size={26}
          style={{ color: tintColor }}
        />
      ),
    },
  },
  Account: {
    screen: Account,
    navigationOptions: {
      tabBarLabel: 'Account',
      tabBarIcon: ({ tintColor, focused }) => (
        <Icon
          name={focused ? 'account' : 'account-outline'}
          size={26}
          style={{ color: tintColor }}
        />
      ),
    },
  },
  },
  {
    tabBarOptions: {
      style: {
        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
      }
    }
  }
);

export const createRootNavigator = (authenticated = false) => {
  return StackNavigator(
    {
      Authenticated: {
        screen: Authenticated,
        navigationOptions: {
          gesturesEnabled: false
        }
      },
      UnAuthenticated: {
        screen: UnAuthenticated,
        navigationOptions: {
          gesturesEnabled: false
        }
      }
    },
    {
      headerMode: "none",
      mode: "modal",
      initialRouteName: authenticated ? "Authenticated" : "UnAuthenticated"
    }
  );
};